<template>
	<el-tooltip content="筛选列" placement="top" effect="dark">
		<el-popover placement="left-start" width="200" trigger="click">
			<el-checkbox-group id="myCheckboxGroup" v-model="checkedArr" @change="handleChange">
				<el-checkbox v-for="item in tableColumns" :class="checkboxStyleFn(item)" :label="item.label"
					:key="item.prop" style="display:block;">
					{{item.label}}
				</el-checkbox>
			</el-checkbox-group>
			<el-button icon="el-icon-jk-lie" slot="reference">
			</el-button>
		</el-popover>
	</el-tooltip>
	</template>

	<script>
		import bus from '../bus.js';
		// import { filter } from 'minimatch';

		export default {
			props: ['tableColumns'],
			data() {
				return {
					checkedArr: [],
				};
			},
			created() {
				this.initCheckedArr();
			},
			methods: {
				handleChange(val) {
					this.$emit('tbChangeLie', val);
				},
				initCheckedArr() {
					this.tableColumns.forEach((element, index) => {
						if (element.isShow) {
							this.checkedArr.push(element.label);
						}
					});
				},
				checkboxStyleFn(item) {
					if (item.isShow) {
						return 'testClass1';
					} else {
						return 'testClass2';
					}
				},

			},
			watch: {

			},
		}
	</script>
	<style scoped>
		#myCheckboxGroup /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {

			color: #606266;
		}

		#myCheckboxGroup /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
			background-color: #5fb878;
			border-color: #5fb878;
		}

		#myCheckboxGroup /deep/ .el-checkbox {
			margin-bottom: 8px;
		}
	</style>
